<template>
	<!-- 判断 -->
	<view class="type_3">
		<view class="questionText" v-html="activeQuestion.questionText"></view>
		<view class="questionResources">
			<view class="questionResource" v-for="questionResource of activeQuestion.questionResources">
				<image :src="questionResource.href" mode="aspectFit" @click="previewImage(questionResource.href)">
				</image>
				<text>
					{{questionResource.resourceName}}
				</text>
			</view>
		</view>
		<view class="choices">
			<radio-group @change="radioChange">
				<view class="choice">
					<label>
						<radio v-if="paperMode==1" color="#2380E9" :value="'1'" :checked="activeAnswer == 1" />
						<view class="choiceText">
							正确
						</view>
					</label>
				</view>
				<view class="choice">
					<label>
						<radio v-if="paperMode==1" color="#2380E9" :value="'0'" :checked="activeAnswer == 0" />
						<view class="choiceText">
							错误
						</view>
					</label>
				</view>
			</radio-group>
		</view>

		<template v-if="paperMode==2 && activeRecord">
			<view class="recordCard">
				<view class="title">参考答案</view>
				<view class="answer">
					<template v-if="activeRecord.answer===null">无</template>
					<template v-else>
						{{activeRecord.answer==1?"正确":"错误"}}
					</template>
				</view>
				<view v-if="activeRecord.answerDetail" class="answerDetail">
					{{activeRecord.answerDetail}}
				</view>
			</view>
			<view class="recordCard">
				<view class="title">我的答案</view>
				<view class="userAnswer">
					<template v-if="activeRecord.userAnswer===null">无</template>
					<template v-else>
						{{activeRecord.userAnswer==1?"正确":"错误"}}
					</template>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		props: ["paperMode", "activeQuestion", "initAnswer", "activeRecord"],
		data() {
			return {
				activeAnswer: null
			}
		},
		created() {
			this.activeAnswer = this.initAnswer;
		},
		methods: {
			radioChange(e) {
				this.activeAnswer = e.detail.value;
				this.$emit("updateAnswer", this.activeAnswer);
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "./record.scss";
	
	.type_3 {
		.questionText {
			line-height: 2vw;
			white-space: pre-wrap;
		}

		.questionResources {
			margin-top: 1vw;
			display: flex;
			flex-wrap: wrap;

			.questionResource {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-bottom: 0.5vw;

				image {
					width: 30vw;
					max-height: 30vw;
					margin-bottom: 0.5vw;
				}

				text {
					color: #999;
					max-width: 25vw;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 1.2vw;
					line-height: 2vw;
				}
			}
		}
	}

	.choices {
		margin-left: 3vw;
		padding-top: 1vw;

		.choice {
			margin-top: 1vw;
			position: relative;

			radio {
				position: absolute;
				left: -3vw;
				top: 1vw;
				transform: translateY(-50%);

				/deep/ .uni-radio-input {
					width: 2vw;
					height: 2vw;

					&::before {
						font-size: 1.4vw;
					}
				}
			}

			.choiceText {
				line-height: 2vw;
			}

			.choiceResources {
				display: flex;
				flex-wrap: wrap;
				width: 100%;

				.choiceResource {
					width: 10vw;
					height: 10vw;
				}
			}

		}
	}
</style>